<template>
  <div>

    <div class="block">

      <h1>网站开放时间</h1>
      <br />
      <el-table :data="timeData" style="width:520px">
        <el-table-column prop="begin" label="当前开始时间" width="180"  />
        <el-table-column prop="end" label="当前结束时间" width="180" />
        <el-table-column prop="operation" label="操作" width="150">
          <template>
            <el-button type="danger" circle @click="deleteTime" >
              <i class="el-icon-close"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <br />
      <el-form :model="param"  ref="login" label-width="80px">
          <el-form-item label="开始时间" prop="begin">
            <el-date-picker
                v-model="param.begin"
                type="datetime"
                placeholder="Select date and time"
            >
            </el-date-picker>
          </el-form-item>

        &nbsp;
          <el-form-item label=" 结束时间" prop="end">

          <el-date-picker
              v-model="param.end"
              type="datetime"
              placeholder="Select date and time"
          >
          </el-date-picker>
          </el-form-item>
        &nbsp;&nbsp;&nbsp;
        <el-button type="primary" @click="setTime">确认</el-button>
        &nbsp;
        <el-button type="primary">取消</el-button>
      </el-form>
      <el-divider></el-divider>

      <h1>当前管理员</h1>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="管理员名" width="180" />
        <el-table-column prop="permission" label="权限" width="180" />
        <el-table-column prop="note" label="备注" width="180"/>
        <el-table-column prop="operation" label="操作" width="180">
          <template  #default="scope">
            <el-button type="primary" circle >
              <i class="el-icon-edit"></i>
            </el-button>
            <el-button type="danger" icon="Delete" circle @click="deleteAdmin(scope.$index)">
              <i class="el-icon-delete"></i>
            </el-button>
          </template>
        </el-table-column>

      </el-table>
      <br />
      &nbsp;&nbsp;
      <div style="width: 100%">
        <el-button type="primary" style="margin-right: 10px" @click="addAdmin">添加管理员</el-button>
      </div>

      <el-divider></el-divider>


      <h1>历史操作</h1>
      <el-input
          disabled="true"
          rows="9"
          type="textarea"
          placeholder="Please input"
      />



      </div>

  </div>
</template>

<script>
export default {
  //权限管理
  name: "AdminJurisdict",
  data() {
    return {
      param:{
        begin:"",
        end:"",
      },
      timeData:[
        {
          begin:"无",
          end:"无",
        }
      ],
      time1: "",
      time2: "",
      tableData : [
        {
          name: 'admin',
          permission:'超级管理员',
          note:'无',

        },
        {
          name: 'abc',
          permission:'管理员',
          note:'教务老师',
          operation:'',
        },
      ]

    }
  },
  mounted() {
    this.getTime()
  },
  methods: {
    //删除时间
    deleteTime(){
      this.axios.post("deleteopentime"
      ).then((response) => {
        console.log(response.data)
        if (response.data['msg'] == "ok") {
          this.tableData = [
            {
              begin:"无",
              end:"无",
            }
          ]
        }
      })
    },
    //获取时间
    getTime(){
      this.axios.post("getopentime"
      ).then((response) => {
        console.log(response.data)
        if (response.data['msg'] == "ok") {
          let data = [{
            begin:response.data["begin"],
            end:response.data["end"],
          }]
          this.timeData = data
        }
      })
    },
    //设置时间
    setTime(){

      this.$confirm('请确定是否将网站的开发时间设置为：'+String(this.param.begin)+"~"+this.param.end, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        let params = new URLSearchParams();
        params.append('begin',this.param.begin);
        params.append('end',this.param.end);

        this.axios.post("setopentime",
            params
        ).then((response) => {
          console.log(response.data)
          if (response.data['msg'] == "ok") {
            this.$forceUpdate()         //解决数据渲染延迟
            this.getTime()
          }
        })
        this.$message({
          type: 'success',
          message: '设置成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消设置'
        });
      });
    },

    deleteAdmin() {
      this.$confirm('此操作将永久删除该管理员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    addAdmin(){
      this.$prompt('请输入您的密码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: '你的是: ' + value
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    }
  }
}
</script>

<style scoped>

</style>